<!-- 商户能源费 -->
<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<!-- <el-select v-model="queryParams.processKey" collapse-tags collapse-tags-tooltip class="zs-select-md zs-space-right-sm" placeholder="楼层" clearable>
					<el-option v-for="item in dictObj.BUILDING_LEVEL" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
				</el-select> -->
				<el-input v-model="queryParams.assetsPromoteNum" class="zs-select-md zs-space-right-sm" placeholder="资产编号" clearable @blur="queryList" />
				<el-input v-model="queryParams.brandName" class="zs-select-md zs-space-right-sm" placeholder="品牌名称" clearable @blur="queryList" />
				<el-input v-model="queryParams.contractCode" class="zs-select-md zs-space-right-sm" placeholder="合同编号" clearable @blur="queryList" />
				<el-button class="zs-btn-plain" @click="queryList" v-btnPermi="{ permis: ['p_btn_property_project_water_meter_relation_list_query'] }"> 查询 </el-button>
			</span>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" align="center" :index="(index) => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="unitTypeValue" label="资产类型" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<!-- <el-table-column prop="routeName" label="楼层" minWidth="120" show-overflow-tooltip align="left" :formatter="defaultTableData" /> -->
				<el-table-column prop="assetsPromoteNum" label="资产编号" minWidth="90" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="contractSignArea" label="面积" align="right" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="brandName" label="品牌名称" minWidth="120" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="contractCode" label="合同编号" minWidth="120" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="contractStatusValue" label="合同状态" align="center" :formatter="defaultTableData" />
				<el-table-column prop="waterMeterNumFormat" label="水表配置" align="center" :formatter="defaultTableData" />
				<el-table-column prop="eleMeterNumFormat" label="电表配置" align="center" :formatter="defaultTableData" />
				<el-table-column prop="" label="水表" width="260" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="goSeePage(row, 'water')" v-btnPermi="{ permis: ['p_btn_property_project_water_meter_relation_list_view'] }">查看</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'wSign')" v-btnPermi="{ permis: ['p_btn_property_project_water_meter_relation_list_add'], businessFlag: true }">挂表</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="goBreakPage(row, 'water')" v-btnPermi="{ permis: ['p_btn_property_project_water_meter_relation_list_reduce'], businessFlag: true }">解表</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="goDetailPage(row, 'water')" v-btnPermi="{ permis: ['p_btn_property_project_water_meter_relation_list_detail'], businessFlag: true }">明细</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'wCost')" v-btnPermi="{ permis: ['p_btn_property_project_water_meter_relation_list_expense'], businessFlag: true }">费用</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="" label="电表" width="260" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="goSeePage(row, 'electricity')" v-btnPermi="{ permis: ['p_btn_property_project_electric_meter_relation_list_view'] }">查看</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'eSign')" v-btnPermi="{ permis: ['p_btn_property_project_electric_meter_relation_list_add'], businessFlag: true }">挂表</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="goBreakPage(row, 'electricity')" v-btnPermi="{ permis: ['p_btn_property_project_electric_meter_relation_list_reduce'], businessFlag: true }">解表</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="goDetailPage(row, 'electricity')" v-btnPermi="{ permis: ['p_btn_property_project_electric_meter_relation_list_detail'], businessFlag: true }">明细</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'eCost')" v-btnPermi="{ permis: ['p_btn_property_project_electric_meter_relation_list_expense'], businessFlag: true }">费用</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积：m²</div>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>

	<!-- 挂表-水 -->
	<DrawerWaterSign :isShow="drawer.wSign.isShowDrawer" :isReadOnly="drawer.wSign.isReadOnly" :handleType="drawer.wSign.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'wSign')"> </DrawerWaterSign>

	<!-- 费用-水 -->
	<DrawerWaterCost :isShow="drawer.wCost.isShowDrawer" :isReadOnly="drawer.wCost.isReadOnly" :handleType="drawer.wCost.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'wCost')"> </DrawerWaterCost>

	<!-- 挂表-电 -->
	<DrawerElectricitySign :isShow="drawer.eSign.isShowDrawer" :isReadOnly="drawer.eSign.isReadOnly" :handleType="drawer.eSign.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'eSign')"> </DrawerElectricitySign>

	<!-- 费用-电 -->
	<DrawerElectricityCost :isShow="drawer.eCost.isShowDrawer" :isReadOnly="drawer.eCost.isReadOnly" :handleType="drawer.eCost.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'eCost')"> </DrawerElectricityCost>
</template>

<script setup>
	import DrawerWaterSign from './components/drawerWaterSign.vue';
	import DrawerWaterCost from './components/drawerWaterCost.vue';
	import DrawerElectricitySign from './components/drawerElectricitySign.vue';
	import DrawerElectricityCost from './components/drawerElectricityCost.vue';
	import { energyListApi } from '@/api/energy.js';
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute, useRouter } from 'vue-router';
	import { defaultTableData, getDicName } from '@/utils/publicUtils';
	const route = useRoute();
	const router = useRouter();
	const store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const dictObj = store.getters.getDictObj(['BUILDING_LEVEL']);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let queryParams = reactive({ projectCode: route.query.projectCode, pageNumber: 1, pageSize: curPageSize.value });

	// 抽屉相关
	let currentRow = reactive({ data: {} });
	let drawer = reactive({
		wSign: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
		wCost: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
		eSign: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
		eCost: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
	});

	const openDrawer = (flag, handleType, row, drawerType) => {
		drawer[drawerType].isReadOnly = flag;
		drawer[drawerType].isShowDrawer = true;
		drawer[drawerType].handleType = handleType;
		currentRow.data = row;
	};

	const closeDrawer = (data, drawerType) => {
		drawer[drawerType].isShowDrawer = data.isShow;
		data.isRefresh && queryList('init');
	};

	// 列表数据源
	const queryList = async init => {
		if (process.env.NODE_ENV !== 'development') {
			let portalResourceList = JSON.parse(localStorage.getItem('portalResourceList'));
			if (init != 'init' && !portalResourceList.includes('p_btn_property_inspection_list_query')) return;
		}
		tableData.loading = true;
		let res = await energyListApi(queryParams);
		if (res.data.code !== 200) return;
		initData(res.data.data.list);
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.waterMeterNumFormat = item.waterMeterNum ? item.waterMeterNum + '个' : '未配置';
			item.eleMeterNumFormat = item.electricMeterNum ? item.electricMeterNum + '个' : '未配置';
			item.contractSignArea = item.contractSignArea ? Number(item.contractSignArea).toFixed(2) : '0.00';
		});
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList('init');
	};

	//查看
	const goSeePage = (row, type) => {
		let title = type == 'water' ? '水表' : '电表';
		let rid = type == 'water' ? 'page_property_project_water_meter_relation_view_list' : 'page_property_project_electric_meter_relation_view_list';
		router.push({ path: '/page/routeController/index', query: { rid: rid, rTitle: title + '查看', id: row.contractId } });
	};

	//明细
	const goDetailPage = (row, type) => {
		let title = type == 'water' ? '水表' : '电表';
		let rid = type == 'water' ? 'page_property_project_water_meter_relation_detail_list' : 'page_property_project_electric_meter_relation_detail_list';
		router.push({ path: '/page/routeController/index', query: { rid: rid, rTitle: title + '明细', id: row.contractId } });
	};

	//解表
	const goBreakPage = (row, type) => {
		let title = type == 'water' ? '水表' : '电表';
		let rid = type == 'water' ? 'page_property_project_water_meter_relation_add_list' : 'page_property_project_electric_meter_relation_add_list';
		router.push({ path: '/page/routeController/index', query: { rid: rid, rTitle: title + '解表', id: row.contractId, type: 'break', projectCode: route.query.projectCode } });
	};

	let aee = [
		{a:1,b:2,isDisabled:false,isRequired:false},
		{a:11,b:22,isDisabled:false,isRequired:false},
		{a:111,b:222,isDisabled:false,isRequired:false},
	]
	const setMeterReadingDisabledStatus = (list, isDisabled, isRequired) => list.map(item => (item.a === 1 ? { ...item, isDisabled, isRequired } : item));
	let isDisabled = true
	let isRequired = true
	console.log(setMeterReadingDisabledStatus(aee, isDisabled, isDisabled))

	queryList('init');
</script>
